<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue生命周期</title>
</head>
<body>

<!--
     vue实例从创建到销毁的过程  new
-->
<div id="app">
    <p id="p1">{{info}}</p>
    <p><input type="text" v-model="info"></p>
</div>
<script src="../vue.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            info:"hello vue",
            student:{}
        },
        methods:{},
        beforeCreate(){ // vue实例创建时 经历的第一个生命周期函数  完成了事件和生命周期函数的初始化
            console.log("beforeCreate()生命周期函数被调用 data:info="+this.info)
            //  异步请求  学生数据   不能实现数据的赋值
        },
        created(){// vue实例创建时 经历的第二个生命周期函数  完成了data  method的初始化
            console.log("created()生命周期函数被调用 data:info="+this.info)
            // 异步请求  学生数据   最早发送异步请求的位置

        },
        beforeMount(){// vue实例创建时 经历的第三个生命周期函数  完成了模板的编译 但是没有替换页面内容
            let p = document.getElementById("p1");
            let msg = p.innerText;
            console.log("beforeMount()生命周期函数被调用 页面p标签中的内容  = "+msg)
        },
        mounted(){// vue实例创建时 经历的第四个生命周期函数  完成了页面内容的替换
            let p = document.getElementById("p1");
            let msg = p.innerText;
            console.log("mounted()生命周期函数被调用 页面p标签中的内容  = "+msg)
        },
        beforeUpdate(){// vue实例创建时 经历的第五个生命周期函数  该生命周期函数是在data被修改时自动调用  页面的内容没有完成新内容的替换
            let p = document.getElementById("p1");
            let msg = p.innerText;
            console.log("beforeUpdate()生命周期函数被调用 页面p标签中的内容  = "+msg)
        },
        updated(){// vue实例创建时 经历的第六个生命周期函数  该生命周期函数是在data被修改时自动调用  页面的内容已经完成新内容的替换
            let p = document.getElementById("p1");
            let msg = p.innerText;
            console.log("updated()生命周期函数被调用 页面p标签中的内容  = "+msg)
        },
        beforeDestroy(){// vue实例创建时 经历的第七个生命周期函数  该生命周期函数是在$destroy()函数调用时自动完成调用  没有完成事件的监听  组件的销毁
            let p = document.getElementById("p1");
            let msg = p.innerText;
            console.log("beforeDestroy()生命周期函数被调用 页面p标签中的内容  = "+msg)

        },
        destroyed(){// vue实例创建时 经历的第八个生命周期函数  该生命周期函数是在$destroy()函数调用时自动完成调用  完成了事件的监听  组件的销毁

            console.log("vue实例被销毁")

        }
    })
</script>
</body>
</html>